<template>
  <div>
    <div class="box">
      <div class="jt">

          <span class="jiachu">H币提现</span>

      </div>
    </div>
    <!-- <div class="huise"> </div> -->

    <div class="biao">
             <div class="biao-left">
                      <p><span class="yuan"></span></p>
                      <p><img class="biao-zhong" src="../../image//提现记录页_看图王_03.gif" alt=""></p>
                      <p><span class="yuan1"></span></p>
             </div>




             <div class="biao-right">
                   <p class="biao-r-1">发起提现请求</p>
                   <p class="biao-r-2">银行处理中</p>
                   <p class="biao-r-3">预计03-12 12:35前到账</p>
                   <p class="biao-r-4">到账成功</p>
             </div>
    </div>

   <div class="tixianjine">
    <span class="tixian">提现金额</span>
    <span class="fuhaoyou">￥ <span>{{ moneyB }}.00</span> </span>
   </div>

   <div class="daoyhk">
    <span class="daozhanyhk">到账银行卡</span>
    <span class="youbiankaihao">建设银行 <span> 尾号</span> <span>9276</span> </span>
   </div>

    <!-- <van-nav-bar title="H币提现" /> -->
<div class="zhong">
    <van-button class="wangcheng" type="primary" @click="mdqb" >完成</van-button>
</div>

  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';
const moneyB = localStorage.getItem('moneyB')
const active = ref(1);


const mdqb = () => {
  router.push('/money')
}
</script>

<style lang="scss" scoped>

.zhong{
  margin-top: 170px; // 340px * 0.5 = 170px
  float: left;
  width: 100%;
  height: 70px; // 140px * 0.5 = 70px
  // background: palegoldenrod;
  text-align: center;
.wangcheng{
    font-size: 17.5px; // 35px * 0.5 = 17.5px
    border-radius: 2.5px; // 5px * 0.5 = 2.5px
    width: 325px; // 650px * 0.5 = 325px
    height: 45px; // 90px * 0.5 = 45px
    background-color: #247ce0;
    // margin-left: 28px;
  }
}


.daoyhk{
   width: 320px; // 640px * 0.5 = 320px
  height: 15px; // 30px * 0.5 = 15px
  // background: palegoldenrod;
  margin-top: 30px; // 60px * 0.5 = 30px
  margin-left: 18px; // 36px * 0.5 = 18px
  position: relative;
 .daozhanyhk{
    font-size: 17.5px; // 35px * 0.5 = 17.5px
    color: #999999;
  }
 .youbiankaihao{
    font-size: 14px; // 28px * 0.5 = 14px
    color: #333333;
    right: 0;
    position: absolute;
  }
}

.tixianjine{
  width: 320px; // 640px * 0.5 = 320px
  height: 15px; // 30px * 0.5 = 15px
  // background: palegoldenrod;
  margin-top: 20px; // 40px * 0.5 = 20px
  margin-left: 20px; // 40px * 0.5 = 20px
  position: relative;
 .tixian{
    font-size: 17.5px; // 35px * 0.5 = 17.5px
    color: #999999;
  }
 .fuhaoyou{
    font-size: 14px; // 28px * 0.5 = 14px
    color: #333333;
    right: 0;
    position: absolute;
  }
}


.biao {
  display: flex;
  width: 320px; // 640px * 0.5 = 320px
  height: 220px; // 440px * 0.5 = 220px
   margin-top: 20px; // 40px * 0.5 = 20px
   border-bottom: 1px solid #ccc; // 2px * 0.5 = 1px
  // background: palegoldenrod;
  margin-left: 28px; // 56px * 0.5 = 28px

 .biao-left{
    display: flex;
    display: inline-block;
    height: 200px; // 400px * 0.5 = 200px
    width: 25px; // 50px * 0.5 = 25px
    border-right: 1px solid #ccc; // 2px * 0.5 = 1px

  }
 .yuan{
    display: flex;
    margin-top: -12.5px; // -25px * 0.5 = -12.5px
    width: 15px; // 30px * 0.5 = 15px
    height: 15px; // 30px * 0.5 = 15px
    border-radius: 25px; // 50px * 0.5 = 25px
    background-color: #3087ea;
    margin-left: 17.5px; // 35px * 0.5 = 17.5px
  }
  .biao-zhong{
          width: 40px; // 80px * 0.5 = 40px
          height: 40px; // 80px * 0.5 = 40px
          margin: 5px; // 10px * 0.5 = 5px
          margin-top: 50px; // 100px * 0.5 = 50px
   }

 .yuan1{
    display: flex;
    margin-top: -12.5px; // -25px * 0.5 = -12.5px
    width: 15px; // 30px * 0.5 = 15px
    height: 15px; // 30px * 0.5 = 15px
    border-radius: 25px; // 50px * 0.5 = 25px
    background-color: #999999;
    margin-top: 65px; // 130px * 0.5 = 65px
    margin-left: 17.5px; // 35px * 0.5 = 17.5px
  }

 .biao-right{
    display: flex;
    display: inline-block;
    width: 150px; // 300px * 0.5 = 150px
    height: 200px; // 400px * 0.5 = 200px

    margin-left: 35px; // 70px * 0.5 = 35px
  }
 .biao-r-1{
    font-size: 15px; // 30px * 0.5 = 15px
    margin-top: -5px; // -10px * 0.5 = -5px
  }
 .biao-r-2{
    margin-top: 62.5px; // 125px * 0.5 = 62.5px
    font-size: 15px; // 30px * 0.5 = 15px
  }
 .biao-r-3{
    font-size: 10px; // 20px * 0.5 = 10px
    margin-top: -10px; // -20px * 0.5 = -10px
    color: #999999;
  }
 .biao-r-4{
    font-size: 17.5px; // 35px * 0.5 = 17.5px
    color: #999999;
    margin-top: 65px; // 130px * 0.5 = 65px
  }




 .zhongjianjuli{
    margin-left: 30px; // 60px * 0.5 = 30px
    font-size: 14px; // 28px * 0.5 = 14px
    color: #333333;
  }
 .zhongjianjulichuliz{
    margin-left: 30px; // 60px * 0.5 = 30px
    font-size: 14px; // 28px * 0.5 = 14px
    color: #333333;
  }
 .zhongjianjulishijiandaoz{
    margin-left: 30px; // 60px * 0.5 = 30px
    font-size: 12.5px; // 25px * 0.5 = 12.5px
    margin-top: 20px; // 40px * 0.5 = 20px
    color: #999999;
  }
 .zhongjianjulicgong{
    margin-left: 30px; // 60px * 0.5 = 30px
    font-size: 14px; // 28px * 0.5 = 14px
    color: #999999;
  }
 .xianhui{
  width: 100%;
  height: 1px; // 2px * 0.5 = 1px
  margin-top: 20px; // 40px * 0.5 = 20px
  background-color: #f2f2f2;
  }
}

.box {
  // width: 361px;
  width: 100%;
  height: 50px; // 100px * 0.5 = 50px
  background-color: #ffffff;

 .jt {
    width: 100%;
    height: 20px; // 40px * 0.5 = 20px
    float: left;
    margin-top: 25px; // 50px * 0.5 = 25px
    margin-bottom: 40px; // 80px * 0.5 = 40px
    text-align: center;
     font-weight: bold;
     font-size: 20px; // 40px * 0.5 = 20px
   .jt1 {
      width: 16px; // 32px * 0.5 = 16px
      height: 16px; // 32px * 0.5 = 16px
      // margin-left: 20px;
    }

   .wdqb {
      color: #000000;
      font-size: 16px; // 32px * 0.5 = 16px

      //   font-weight: bold;
      // margin-left: 130px;
      // background-color: paleturquoise;
     .jiachu {
        margin-top: 10px; // 20px * 0.5 = 10px

      }

     .tixianjilu {
        font-size: 12px; // 24px * 0.5 = 12px
        margin-left: 90px; // 180px * 0.5 = 90px
      }
    }
  }



}
.huise {
  width: 100%;
  height: 3px; // 6px * 0.5 = 3px
  background-color: #f2f2f2;
}


.van-icon-checked{
    font-size: 20px!important; // 40px * 0.5 = 20px
    z-index: 999;
    color:#09BAA7 ;
}

</style>
